<template>
  <el-card
    shadow="hover"
    :body-style="{ padding: '20px' }"
    :style="{ background: '#ccc' }"
  >
    <TopView></TopView>
    <MiddleView></MiddleView>
    <BottomView></BottomView>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>
<script lang="ts" setup>
import TopView from "./components/TopView.vue";
import MiddleView from "./components/MiddleView.vue";
import BottomView from "./components/BottomView.vue";
import { onMounted } from "vue";
//引入data小仓库
import useDataState from "@/stores/resportData";
const dataState = useDataState();
//解构仓库中的方法及数据
const { getData } = dataState;
//初始化操作
onMounted(() => {
  getData();
});
</script>

<style scoped></style>
